<template>
  <div class="app-container">
     <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
        新建
      </el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-remove" @click="handleRemove">
        删除
      </el-button>
      <el-button class="filter-item" style="margin-left:15px;" type="info" icon="el-icon-refresh" @click="handleRefresh">
        刷新
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      stripe
      border
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        label="序号"
        type="index"
        width="55"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ (listQuery.current - 1) * listQuery.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="false"
        align="center"
        prop="id"
        label="id"
      />
      <el-table-column
        align="center"
        prop="normNum"
        label="标准号"
        width="180"
      />
      <el-table-column
        align="center"
        prop="normName"
        label="标准名称"
        width="400"
      />
      <el-table-column
        align="center"
        prop="type"
        label="类型"
        width="55"
        :formatter="typeFormatter"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="55"
        :formatter="statusFormatter"
      />
      <el-table-column
        align="center"
        prop="releaseDate"
        label="发布日期"
        :formatter="dateFormatter"
      />
      <el-table-column
        align="center"
        prop="realTime"
        label="实时日期"
        :formatter="dateFormatter"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handlePDFClick(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />

    <el-dialog
      :title.sync="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
      :before-close="handleClose"
    >
      <el-container style="width: 85%">
        <el-form ref="item" :rules="rules" style="width: 100%" label-position="right" label-width="30%" :model="item">
          <el-form-item v-show="false" label="id">
            <el-input v-model="item.id" />
          </el-form-item>
          <el-form-item label="标准号" prop="normNum">
            <el-input v-model="item.normNum" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="标准名称" prop="normName">
            <el-input v-model="item.normName" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="item.type" :disabled="!dialogEdit" style="width: 100%">
              <el-option key="1" label="推标" value="1" />
              <el-option key="2" label="规范" value="2" />
              <el-option key="3" label="强标" value="3" />
              <el-option key="4" label="文件" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker
              v-model="item.releaseDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              :disabled="!dialogEdit"
            />
          </el-form-item>
          <el-form-item label="实时日期">
            <el-date-picker
              v-model="item.realTime"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              :disabled="!dialogEdit"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="item.status" :disabled="!dialogEdit" style="width: 100%">
              <el-option key="1" label="现行" value="1" />
              <el-option key="2" label="即将实施" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-container>
      <span v-if="dialogEdit" slot="footer" class="dialog-footer">
        <el-button @click="handleRefreshRule('item')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('item')">确 定</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-loading="pdfLoading"
      :title.sync="pdfName"
      :visible.sync="pdfVisible"
      width="70%"
      align="center"
    >
      <pdf v-for="i in pdfDetail.numPages" :key="i" ref="pdf" :src="pdfDetail.url" :page="i" />
    </el-dialog>
  </div>

</template>

<script>

import { page, addOrUpdate, removes } from '@/api/manage'
import Pagination from '@/components/Pagination'
import pdf from 'vue-pdf'
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import { mapGetters } from "vuex";
export default {
  name: 'ManageHosit',
  components: { Pagination, pdf,Breadcrumb },
  computed: {
    naviItems() {
      return [
        { text: this.equTypeName },
        { text: "数据测试" },
        { text: "标准治理" },
        { text: "起重机械" },
      ];
    },
    ...mapGetters(["equTypeName"]),
  },
  data() {
    return {
      total: 0,
      listLoading: true,
      selectionItem: [],
      dialogVisible: false,
      dialogTitle: '新增标准治理',
      dialogEdit: true,
      listQuery: {
        current: 1,
        size: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
        normTypeId: 2
      },
      rules: {
        normNum: [{
          required: true, message: '请输入标准号', trigger: 'blur'
        }],
        normName: [{
          required: true, message: '请输入标准名', trigger: 'blur'
        }],
        type: [{
          required: true, message: '请输入类型', trigger: 'blur'
        }],
        status: [{
          required: true, message: '请输入状态', trigger: 'blur'
        }]
      },
      list: [],
      item: {
        normTypeId: 2
      },
      pdfVisible: false,
      pdfLoading: true,
      pdfName: '',
      host: 'http://47.106.99.192/',
      pdfDetail: {
        numPages: 0,
        url: ''
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    /**
     * 单行编辑
     * @param row
     */
    handleClick(row, isEdit) {
      this.item = row
      this.dialogVisible = true
      this.dialogTitle = '标准详情'
      this.dialogEdit = isEdit
    },

    /**
     * 单行编辑
     * @param row
     */
    handlePDFClick(row) {
      // this.pdfDetail = {
      //   numPages: 0,
      //   url: ''
      // }
      if (!row.pdfUrl) {
        alert('资料尚不齐全，请耐心等待！')
        return
      }

      if (row.pdfUrl.indexOf('http') > -1) {
        // window.location.href = row.pdfUrl
        window.open(row.pdfUrl, '_blank')
      } else {
        this.pdfLoading = true
        this.pdfVisible = true
        this.pdfName = row.normName
        this.pdfDetail.url = this.host + row.pdfUrl
        const loadingTask = pdf.createLoadingTask(this.pdfDetail.url)
        loadingTask.promise.then(pdf => {
          this.pdfDetail.numPages = pdf.numPages
        }).then(() => {
          this.pdfLoading = false
        }).catch(err => {
          console.error('pdf 加载失败', err)
        })
      }
    },

    /**
     * 添加
     */
    handleCreate() {
      this.dialogVisible = true
      this.dialogTitle = '新增标准治理'
      this.item = {
        status: '1',
        type: '1',
        normTypeId: 2
      }
      this.dialogEdit = true
    },

    /**
     * 删除
     */
    handleRemove(index, row) {
      const data = []
      if (row) {
        data.push(`ids=${row.id}`)
      } else {
        if (this.selectionItem.length < 1) return
        this.selectionItem.forEach(item => {
          data.push(`ids=${item.id}`)
        })
      }
      removes(data.join('&')).then(response => {
        this.getList()
      })
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.getList()
    },

    /**
     * 多选行
     * @param rows
     */
    handleSelectionChange(rows) {
      this.selectionItem = rows
    },

    /**
     * dialog关闭
     * @param done
     */
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          // done();
          this.dialogVisible = false
        })
        .catch(_ => {})
    },

    handleConfirm(formName) {
      this.listLoading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.item.releaseDate = new Date(this.item.releaseDate)
          this.item.realTime = new Date(this.item.realTime)
          addOrUpdate(this.item).then().then(response => {
            this.dialogVisible = false
            this.getList()

            // Just to simulate the time of the request
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
          })
        } else {
          return false
        }
      })
    },

    typeFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case '1':
          return '推标'
        case '2':
          return '规范'
        case '3':
          return '强标'
        case '4':
          return '文件'
      }
    },

    statusFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case '1':
          return '现行'
        case '2':
          return '即将实施'
      }
    },

    dateFormatter(row, column, cellValue, index) {
      return !cellValue || cellValue.split('T')[0]
    },

    handleRefreshRule(formName) {
      this.dialogVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
